<script setup lang='ts'>
  import xmimg from './xmimg.vue';
  const $emit = defineEmits(['change', 'update:tabsKey','update:rank_id'])
  interface tabsQuery {
    key:number
    image:string
    notImage:string
  }
  const props = defineProps({
    tabsKey:{
      type:Number,
      default:0
    },
    tabs:{
      type:Array<tabsQuery>,
      default:()=>[]
    }
  })
  const handleTabs = (item:any = {})=>{
    const { key, rank_id=0 } = item
    if(props.tabsKey == key) return
    $emit('update:tabsKey',key)
    $emit('update:rank_id',rank_id)
    $emit('change',item)
  }
</script>
<template>
  <div
    v-if="tabs.length > 1"
    class="tabsList"
    :style="{
      '--butLength':tabs.length,
      justifyContent:tabs.length<=4?'center':'flex-start'
    }"
  >
    <xmimg
      v-for="item in tabs"
      :src="`tabImg/${tabsKey == item.key?item.image:item.notImage}`"
      @click="handleTabs(item)"
    />
  </div>
</template>

<style lang='scss' scoped>
  .tabsList {
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: repeat(var(--butLength) , 82px);
    grid-gap: 0 5px;
    img {
      width: 82px;
      height: 50px;
    }
  }
</style>